import html from '../../assets/partials/channel-status.html';
import echarts from 'echarts';

let interval;

export default {
    name: 'channelStatus',
    title: '播放状态',
    html: html,
    beforeMount: element => {
        console.info('马上要显示了');
    },
    mounted: (element, menudata) => {
        let chartDom = element.find('#channelStatus').get(0);
        var chart = echarts.init(chartDom);

        let startTime = $.timestampToDateStr(new Date().getTime() - 180000);
        $.myAjax({
            url: "log/getCurrentChannelPlayNum.do",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({
                startTime: startTime,
                groupId: $('#tree-panel').find(".selected").attr("data-id")
            }),
            success: function(result) {
                let height = result.data.channels.length * 50;
                chartDom.style.height = (height + 100) + "px";
                chart.setOption({
                    title: {
                        text: '[' + result.data.group + ']频道播放总量',
                        subtext: '(点击右边栏分组切换分组视图,每5秒自动刷新)'
                    },
                    legend: {
                        data: ['播放数'],
                        height: height
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: result.data.channels
                    },
                    series: [{
                        name: '播放数',
                        type: 'bar',
                        data: result.data.nums
                    }]
                });
                chart.resize();
            }
        });

        interval = setInterval(function() {
            let startTime = $.timestampToDateStr(new Date().getTime() - 180000);
            $.myAjax({
                url: "log/getCurrentChannelPlayNum.do",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    startTime: startTime,
                    groupId: $('#tree-panel').find(".selected").attr("data-id")
                }),
                success: function(result) {
                    let height = result.data.channels.length * 50;
                    chartDom.style.height = (height + 100) + "px";
                    chart.setOption({
                        title: {
                            text: '[' + result.data.group + ']频道播放总量'
                        },
                        legend: {
                            height: height
                        },
                        yAxis: {
                            type: 'category',
                            data: result.data.channels
                        },
                        series: [{
                            name: '播放数',
                            type: 'bar',
                            data: result.data.nums
                        }]
                    });
                    chart.resize();
                }
            });
        }, 5000);
    },
    unmounted: element => {
        clearInterval(interval);
    }
};
